<!DOCTYPE html>
<html>
<head>
	<title>实时加载的进度条</title>
	<style>
	*{margin:0;padding:0;}
	.loading{
		width:100%;
		height:100%;
		position:fixed;
		top:0;left:0;
		z-index:100;
		background-color:white;
	}
	.loading .pic{
		width:100px;height:100px;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
		text-align: center;
		line-height: 100px;
		font-size:20px;
	}
	.loading .pic span{
		display: block;
		width:80px;
		height:80px
		;position:absolute;
		top:10px;
		left:10px;
		border-radius:50%;
		-webkit-box-shadow: 0 3px 0 #666;
		        box-shadow: 0 3px 0 #666;
		-webkit-animation:rotate  1s infinite linear;
		        animation:rotate  1s infinite linear;
	}

@-webkit-keyframes rotate{
	0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);};
}
@keyframes rotate{
	0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);};
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		// 一张图片缓存问题的解决方案
		// var img = new Image();
		// img.onload = function(){};
		// img.src = "";
		var img = $("img");
		var num = 0;
		img.each(function(i){
			var oImg = new Image();
			oImg.onload = function(){
				oImg.onload=null;
				num++ ;
				var len=img.length;
				$(".loading b").html(parseInt(num/len*100)+"%");			
				if(num >= i){
					$(".loading").fadeOut();
				}
			}
			oImg.src = img[i].src;

		});
	})
		

</script>
</head>
<body>
<div class="loading">
	<div class="pic">
		<span></span>
		<b>0%</b>
	</div>
</div>
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">



</body>
</html>